<template>
  <div class="formL-agent-info-view">

    <el-form
        :inline="true"
        label-position="right"
        label-width="130px"
    >

      <el-row>

        <el-col :span="12">
          <el-form-item label="营销模式:">
            <span v-if="datas.sellMode == 'direct'">终端直销</span>
            <span v-else-if="datas.agentAttribute == 1">独家招商</span>
            <span v-else-if="datas.agentAttribute == 2">精细招商</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理商名称:">
            <span>{{ datas.agentName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交易价:">
            <!--                        <a class="mainColor" @click="priceClick" v-if="datas.agentType && datas.agentType != 'direct'">-->
            <!--                            <span v-if="datas.tradePrice">{{datas.tradePrice}}元/{{getLabel('sell_unit',unit)}}</span>-->
            <!--                        </a>-->
            <el-link
                v-if="datas.agentType && datas.agentType != 'direct'"
                :underline="false"
                style="display: flex;align-items: center"
                type="primary"
                @click="priceClick"
            >
              <span v-if="datas.tradePrice">{{ datas.tradePrice }}元/{{ getLabel('sell_unit', unit) }}</span>
            </el-link>
            <span v-else>{{ datas.tradePrice }}元/{{ getLabel('sell_unit', unit) }}</span>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责营销职员:">
            <span>{{ datas.headName }}</span>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <detail-drawer
        ref="detailDrawer"
        :size-width="1000"
        custom-title
    >
      <template #title>

        <span>招商要素 </span>
        <span class="drawerTitle">{{ datas.agentProductNumber }}</span>

      </template>
      <template #contents>

        <product-and-price-info-view :id="datas.agentProductId"/>

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'AgentInfoView',
  components: {
    productAndPriceInfoView: defineAsyncComponent(() =>
        import('../../../../commonView/detailComponents/agent/productAndPriceInfoView.vue')
    )
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    unit: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    var data = reactive({
      detailDrawer: null,
    })

    const priceClick = () => {
      data.detailDrawer.open()
    }

    return {
      ...toRefs(data),

      priceClick,
    }
  },
})
</script>

<style scoped>
</style>
